<template>
    <div class="ReportZy">
        <div class="panelgroup">
            <el-row :gutter="40">
                <el-col :xs="12" :sm="6" :lg="5" :xl="4" class="panel" v-for="(item , index) in tabarr" :key="index">
                    <div class="cardpanel">
                        <div class="ico_"><i :class="item.ico"></i></div>
                        <div class="infor">
                            <p><count-to :start-val="0" :end-val="item.number" :duration="2000"></count-to></p>
                            <div class="title">
                                <span>{{item.title}}</span>
                                <el-tooltip placement="bottom-end" v-if="item.tips!=''">
                                    <div slot="content">{{item.tips}}</div>
                                    <div class="ico">?</div>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="carttitlebox">
            <div class="bt">
                <span :class="typleindex==0? 'on':''" @click="tabtype(0)">· 趋势图</span>
                <span :class="typleindex==1? 'on':''" @click="tabtype(1)">· TOP10代码位</span>
            </div> 
            <div class="select">
                <el-select 
                    v-model="title_value" 
                    @change="changeChartTitle" 
                    :multiple='typleindex==0?true:false'
                     placeholder="请选择" >
                    <el-option
                        v-for="item in barcartdata.data"
                        :key="item.title"
                        :label="item.title" :value="item.title" >
                        <span style="float: left">{{ item.title }}</span>
                        <span class="bg" :style="'position: absolute;width: 20px; height: 5px; display: block;top: 50%;right: 25%;background:'+item.color"></span>
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="echartsbox">
            <linecart :height="'300px'" :Chartdata="barcartdata" :titlevalue='title_value' :theme="'jazz'"></linecart>
        </div>
         <div class="title_bt">
            <div class="bt" @click="search_show=!search_show">筛选 <i :class="search_show?'el-icon-caret-top':'el-icon-caret-bottom' "></i> </div>
             <div class="search" v-show="selectvalue!='' && selectvalue !='全部'">
                <el-input v-model="searchinput" placeholder="请输入搜索的内容"></el-input>
                <div class="button"><i class="el-icon-search"></i></div>
             </div>
        </div>
         <div class="search_show" v-show="search_show">
            <el-row :gutter="40" >
                <el-col :sm="10" :md="8" :lg="5" class="card">
                    <div class="bt">数据来源：</div>
                    <div class="cardflex1">
                        <el-select v-model="selectvalue" placeholder="数据来源">
                            <el-option
                                v-for="item in select" 
                                :key="item.value"  
                                :label="item.label" 
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :sm="10" :md="8" :lg="5" class="card">
                    <div class="bt">代码分位：</div>
                    <div class="cardflex1">
                        <el-select v-model="selectvalue" filterable placeholder="代码分位">
                            <el-option
                                v-for="item in select" 
                                :key="item.value"  
                                :label="item.label" 
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                 <el-col :sm="10" :md="8" :lg="8" class="card">
                    <div class="bt">代码位：</div>
                    <div class="cardflex1">
                        <el-select v-model="selectvalue" filterable placeholder="代码位">
                            <el-option
                                v-for="item in select" 
                                :key="item.value"  
                                :label="item.label" 
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                  <el-col :sm="4" :md="8" :lg="3" class="card">
                    <el-button type="primary" @click="search">确定</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="tableData" style="width: 100%" class="tablebox">
            <el-table-column prop="title1" label="代码位" width="180">
                <template slot-scope="scope">
                    <!-- <el-link :href="scope.row.titlelink" type="primary">{{scope.row.title1}}</el-link> -->
                    <el-link   type="primary" @click="routerlink(scope.row.title2)">{{scope.row.title1}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="title2" label="代码位ID" width="100"></el-table-column>
            <el-table-column prop="title3" label="数据来源" width="100"></el-table-column>
            <el-table-column prop="title4" label="代码位请求数"></el-table-column>
            <el-table-column prop="title5" label="展现量"></el-table-column>
            <el-table-column prop="title6" label="点击量"></el-table-column>
            <el-table-column prop="title7" label="eCPM"></el-table-column>
            <el-table-column prop="title8" label="CPC"></el-table-column>
            <el-table-column prop="title9" label="收入"></el-table-column>
            <el-table-column prop="title10" label="点击率"></el-table-column>
            <el-table-column prop="title11" label="填充率"></el-table-column>
        </el-table>
        <el-pagination
            class="pageswarp"
            :background="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=pages
            :page-size="20"
            layout="total, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
    </div>
</template>
<script>
 import CountTo from 'vue-count-to';
 import linecart  from './comment/lincart.vue';
  const lineChartData = {
        linecart: {
            title:'2024-01-01 - 2024-01-07',
            type:'line',
            data:[
                {
                    title:'展现量',
                    list: [120, 82, 91, 154, 162, 140,145],
                    time:"2024-01-01",
                    color:"#5470c6"
                },
                {
                    title:'收入',
                    list: [1201, 812, 191, 1534, 1622, 1410,1145],
                    time:"2024-01-02",
                    color:"#91cc75"
                },
                {
                    title:'点击量',
                    list: [1220, 812, 911, 1354, 162, 1410,1145],
                    time:"2024-01-03",
                    color:"#fac858"
                },
                {
                    title:'eCPM',
                    list: [120, 82, 931, 154, 1632, 1430,145],
                    time:"2024-01-04",
                    color:"#ee6666"
                },
                {
                    title:'CPC',
                    list: [1120, 832, 91, 154, 162, 140,145],
                    time:"2024-01-05",
                    color:"#73c0de",
                    
                },
                {
                    title:'点击率',
                    list: [420, 82, 91, 154, 162, 440,145],
                    time:"2024-01-06",
                    color:"#3ba272"
                },
                {
                    title:'填充率',
                    list: [120, 82, 21, 154, 162, 440,145],
                    time:"2024-01-07",
                    color:"#fc8452"
                }
            ]
        },
    }
export default {
    name:'ReportZy',
    data(){
        return{
            tabarr:[
                {
                    title:'展现量',
                    number:2912.12,
                    ico:'el-icon-s-promotion',
                    tips:'整体报告包含百度联盟数据，若您在SSP中以富媒体方式投放百度联盟合作代码，整体报告展现量重复统计，请使用数据来源过滤Union平台。',
                },
                {
                    title:'点击量',
                    number:2912.12,
                    ico:'el-icon-thumb',
                    tips:'',
                },
                {
                    title:'点击率',
                    number:2912.12,
                    ico:'el-icon-s-data',
                    tips:'',
                },{
                    title:'收入',
                    number:2912.12,
                    ico:'el-icon-s-ticket',
                    tips:'直投及优先交易发生的收入是根据媒体在广告投放中填写的单价来计算（不填则不计算），百度默认只结算竞价广告收入。',
                }
                 
            ],
            typleindex:0,
            title_value:[],
            pages:1,
            searchinput:'',  //顶部的搜索栏目
             search_show:false,  //
              selectvalue:'',     //
              select:[
               {value:"全部",lable:"type1"},
               {value:"SSP",lable:"type2"},
               {value:"UNION",lable:"type3"},
           ],
            barcartdata:lineChartData.linecart,
            tableData: [   //表格的数据
                {
                    title1: 'MOD左下富媒体',
                    title2: '6484080',
                    title3: 'SSP',
                    title4: '1',
                    title5: '1',
                    title6: '0',
                    title7: '0.00',
                    title8: '-',
                    title9: '0.00',
                    title10: '0.00%',
                    title11: '100.0%',
                },
                 {
                    title1: 'MOD左下富媒体',
                    title2: '6484080',
                    title3: 'SSP',
                    title4: '1',
                    title5: '1',
                    title6: '0',
                    title7: '0.00',
                    title8: '-',
                    title9: '0.00',
                    title10: '0.00%',
                    title11: '100.0%',
                },
                 {
                    title1: 'MOD左下富媒体',
                    title2: '6484080',
                    title3: 'SSP',
                    title4: '1',
                    title5: '1',
                    title6: '0',
                    title7: '0.00',
                    title8: '-',
                    title9: '0.00',
                    title10: '0.00%',
                    title11: '100.0%',
                },
                 {
                    title1: 'MOD左下富媒体',
                    title2: '6484080',
                    title3: 'SSP',
                    title4: '1',
                    title5: '1',
                    title6: '0',
                    title7: '0.00',
                    title8: '-',
                    title9: '0.00',
                    title10: '0.00%',
                    title11: '100.0%',
                },
                 {
                    title1: 'MOD左下富媒体',
                    title2: '6484080',
                    title3: 'SSP',
                    title4: '1',
                    title5: '1',
                    title6: '0',
                    title7: '0.00',
                    title8: '-',
                    title9: '0.00',
                    title10: '0.00%',
                    title11: '100.0%',
                },
            
          ]
        }
    },
     components:{
        CountTo,
        linecart
    },
    created(){
        this.title_value= this.titlevalue();
    },
    methods:{
         titlevalue(){  //默认显示头2条
            let arr=[];
            let that=this;
            that.barcartdata.data.slice(0,2).forEach((item)=>{arr.push(item.title);})
            return arr;
        },
        changeChartTitle(val){
            if(this.typleindex==0){
                this.title_value=val.slice(-2);
                if(val.length==0){
                    this.title_value=['展现量']
                }
            }else{
                 this.title_value=val;
            }
        },
        tabtype(id){
          this.typleindex=id;
          if(id==1){
            this.title_value='展现量';
            this.barcartdata.type='bar'
          }else{
            this.title_value= this.titlevalue();
             this.barcartdata.type='line'
          }
        },
          search(){
            console.log(this.selectvalue,this.timevalue)
        },
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        routerlink(id){
             this.$router.push({ path: "/report" ,query:{data:id} }) .catch(err => {return err});
        }
    }
}
</script>